import { defineComponent, h } from 'vue'

const buttonVariants = {
  default: `bg-primary text-primary-foreground hover:bg-primary/90`,
  destructive: `bg-destructive text-destructive-foreground hover:bg-destructive/90`,
  outline: `border border-input bg-background hover:bg-accent hover:text-accent-foreground`,
  secondary: `bg-secondary text-secondary-foreground hover:bg-secondary/80`,
  ghost: `hover:bg-accent hover:text-accent-foreground`,
  link: `text-primary underline-offset-4 hover:underline`,
}

const buttonSizes = {
  default: `h-10 px-4 py-2`,
  sm: `h-9 rounded-md px-3`,
  lg: `h-11 rounded-md px-8`,
  icon: `h-10 w-10`,
}

export interface ButtonVariants {
  variant: keyof typeof buttonVariants
  size: keyof typeof buttonSizes
}

function getButtonClasses({ variant = `default`, size = `default` }: Partial<ButtonVariants>) {
  return [
    `inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`,
    buttonVariants[variant],
    buttonSizes[size],
  ].join(` `)
}

const Button = defineComponent({
  name: `Button`,
  props: {
    variant: {
      type: String,
      default: `default`,
    },
    size: {
      type: String,
      default: `default`,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { slots }) {
    return () => h(`button`, {
      class: getButtonClasses({ variant: props.variant as keyof typeof buttonVariants, size: props.size as keyof typeof buttonSizes }),
      disabled: props.disabled,
    }, slots.default?.())
  },
})

export { Button, buttonSizes, buttonVariants, getButtonClasses }
